<template>
  <div id="app">
    <div class="terminal">
      <el-scrollbar style="height: 800px;" ref="terminalScrollbar">
        <div class="message" v-for="(message, index) in terminalOutput" :key="index">
          <pre>{{ message }}</pre>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      terminalOutput: [],
      newMessage: ""
    };
  },
  mounted() {
    //监听主进程的消息
    this.clearOutPut();
    window.electronAPI.onListenMainRemoteMsg((_event, value) => {
      // console.log(value)
      let content=value.split("\n")
      content.forEach((v1)=>{
        if(v1.length>0){
          console.log(v1)
          this.addToOutput(v1);
        }
      })
      this.scrollToBottom();
    })
  },
  methods: {
    sendMessage(msg) {
      this.terminalOutput.push(msg);
    },
    scrollToBottom() {
      this.$refs['terminalScrollbar'].wrap.scrollTop = this.$refs['terminalScrollbar'].wrap.scrollHeight
    },
    clearOutPut() {
      this.terminalOutput = [];
    },

    addToOutput(value){
      this.sendMessage(value);
    },

  }
};
</script>

<style>
#app {
  font-family: monospace;
  text-align: center;
}

.terminal {
  margin: 20px;
  padding: 10px;
  border: 1px solid #e2e2e2;
  background-color: #f9f9f9;
  height: 800px;
  overflow-y: scroll;
  width: 100vw;
}

.message {
  margin-bottom: 10px;
  word-break: break-all;
  white-space: pre-wrap;
}

.message pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
  margin: 0;
}

.input-area {
  margin: 20px;
}

.input-area input {
  padding: 5px;
}

.input-area button {
  padding: 5px 10px;
}
</style>
